<template>
	<view class="content">
		<view class="reservation-form mt1">
			<view class="reservation-form-li flex po ">
				<view class="reservation-form-li-left">
					对方账户
				</view>
				<view class="reservation-form-li-right">
					<input placeholder-style="color:#c3c3c3" v-model="id" class="uni-input" placeholder="手机号码" />
				</view>
			</view>
			<text class="tips">
				钱将实时转入对方账户，无法退款
			</text>
		</view>
		<view class="foot" @click="open">
			下一步
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		computed: {
		    ...mapState(['token','SystemInfo'])
		},
		onShow() {
			// 监听token登录状态请求会员信息
			if(this.token){
				this.getMemberInfo()				
			}
		},
		data() {
			return {
				id: '',
				data: {}
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/member/transfer-log/transfer-log'
			});
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			open() {
				if(this.id == this.data.mobile ){
					uni.showToast({
						title: "不能转账给自己",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				//
				this.vuexRequest({
					url: '/api/addons/execute?route=member/balance-transfer-info&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'GET',
					data: {mobile:this.id},
					success: (res)  => {
						uni.navigateTo({
							url: '/pages/member/transfer-amount/transfer-amount?id=' + this.id
						});
					},
					fail: (err)  => {
						uni.showToast({
							title: err.data.message,
							position:'bottom'
						})
					},
				})	
				
				
			},
			getMemberInfo() {
				this.vuexRequest({
					url: '/api/addons/execute?route=member/info&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'GET',
					data: {},
					success: (res)  => {
						this.data = res.data.data
					},
					fail: (err)  => {
					},
				})
			}
		}
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
	.tips{
		padding: 30upx 20upx;
		color: #959595;
		font-size: 26upx;
	}
	.mt1{
		margin: 20upx  0 0 0;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.before:before{
		position: absolute;
		z-index: 10;
		right: 30upx;
		top: 50%;
		margin: -8upx 0 0 0;
		content: '';
		display: block;
		width: 16upx;
		height: 16upx;
		border: solid 2upx #d4d4d4;
		transform:rotate(45deg);
		border-left: none;
		border-bottom: none;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-input{
		margin: 0;
	}
	.reservation-form-li{
		background: #FFFFFF;
		padding: 10upx 30upx;
	}
	.reservation-form-li-right{
		width: 75%;
		padding: 0 10upx 0 0 ; 
	}
	.store-ad{
		width: 750upx;
		height: 356upx;
	}
	.reservation-form-li-radio{
		padding: 30upx;
	}
	.foot{
		color: #FFFFFF;
		width: 80%;
		height: 100upx;
		background: #e83e41;
		text-align: center;
		line-height: 100upx;
		border-radius: 100upx;
		margin: 80upx auto 0 auto;
		z-index: 20;
	}
	.content{
		padding: 0 0 120upx 0;
	}
	.form-image{
		width: 100upx;
		height: 100upx;
		margin: 0 20upx 0 0;
	}
	.right{
		text-align: right;
		height: 100upx;
		padding: 20upx 0;
	}
</style>
